<!--
  布局容器 示例
  @author 邵鹏坤 2022年9月22日
  参考window11 桌面
  1 在此处整合桌面图标组件（navBar）&任务栏组件（taskBar）
  2 数据源：
    使用props从使用者（父组件）接受所有的导航列表，用于渲染桌面图标组件（数量，路由，图标，导航名）
-->
<template>
  <div class="example-container">
    <ExampleTitle title="弹框组件示例"></ExampleTitle>
    <ExampleTitle
      title="弹框默认整合在桌面desktop组件内，无需单独引入，此示例主要展示如何在弹框内部操作弹框"
      :row="true"
    ></ExampleTitle>
    <div class="row-container">
      <Button color="#3d2085" type="custom" @click="dialog?.toSmall()">最小化当前弹框</Button>
    </div>
    <div class="row-container">
      <Button color="#8a1e93" type="custom" @click="dialog?.toBig()">最大化当前弹框</Button>
    </div>
    <div class="row-container">
      <Button color="#c33991" type="custom" @click="dialog?.toNormal()">窗口化当前弹框</Button>
    </div>
    <MD file-name="dialogExample"></MD>
  </div>
</template>

<script setup lang="ts">
  import MD from '@/views/components/md.vue'
  import ExampleTitle from '@/views/components/exampleTitle.vue'
  import Button from '@/views/button/components/button.vue'
  import { inject } from 'vue'
  import { AliveBar } from '@/winTypes'
  const dialog = inject<AliveBar>('dialog')
</script>

<style lang="scss">
  .--win-button {
    margin: 10px 12px !important;
  }
</style>
